<template>
	<view class="banner" :style="{height: height + 'rpx'}">
		<view v-for="(item, index) in list" :key="index" class="pic" :animation="num === index ?showpic:hidepic"
			:style="{zIndex: zIndex === index ?1:0}" @touchstart="touchstart" @touchend="touchend">
			<app-jump-button :open_type="item.open_type" :url="item.url ? item.url : item.page_url"
				:params="item.params">
				<image :style="{height: height + 'rpx', width: '100%'}" :mode="imgMode" :src="item[name]" />
			</app-jump-button>
		</view>
		<view class="u-swiper-indicator" :style="{
				bottom: '12rpx',
				justifyContent: 'center'
			}">
			<block v-if="mode === 'rect'">
				<view class="u-indicator-item-rect" :class="{ 'u-indicator-item-rect-active': index === num }"
					v-for="(item, index) in list" :key="index"></view>
			</block>
			<block v-if="mode === 'round'">
				<view class="u-indicator-item-round" :class="{ 'u-indicator-item-round-active': index === num }"
					v-for="(item, index) in list" :key="index"></view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'u-swiper',
		props: {
			list: {
				type: Array,
				default () {
					return [];
				}
			},
			// 图片的裁剪模式
			imgMode: {
				type: String,
				default: 'aspectFill'
			},
			// 从list数组中读取的图片的属性名
			name: {
				type: String,
				default: 'image'
			},
			// list的高度，单位rpx
			height: {
				type: [Number, String],
				default: 250
			},
			// 自动轮播时间间隔，单位ms
			duration: {
				type: [Number, String],
				default: 500
			},
			// 隔多久自动切换
			interval: {
				type: [String, Number],
				default: 3000
			},
			// 指示器的模式，rect|dot|number|round
			mode: {
				type: String,
				default: 'round'
			},
			// 指示器的位置，topLeft|topCenter|topRight|bottomLeft|bottomCenter|bottomRight
			indicatorPos: {
				type: String,
				default: 'bottomCenter'
			},
			// 是否自动播放
			autoplay: {
				type: Boolean,
				default: true
			},
		},
		data() {
			return {
				num: 0,
				zIndex: 0,
				showpic: null,
				hidepic: null,
				setTime: 0,
				touchDot: 0
			}
		},

		methods: {
			touchstart(e) {
				this.touchDot = e.touches[0].pageX;
			},

			touchend(e) {
				let touchMove = e.changedTouches[0].pageX;
				if (touchMove - this.touchDot <= -40) {
					this.num = this.num - 1;
					if (this.num < 0) {
						this.num = this.list.length - 1;
					}
					setTimeout(() => {
						this.zIndex = this.num;
					}, 1000);
				}
				if (touchMove - this.touchDot >= 40) {
					this.num = this.num + 1;
					if (this.num >= this.list.length) {
						this.num = 0;
					}
					setTimeout(() => {
						this.zIndex = this.num;

					}, 1000);
				}
			}
		},
		destroyed() {
			clearInterval(this.setTime);
		},
		watch: {
			list: {
				handler(newVal) {
					if (newVal.length === 0) return;
					let animation = uni.createAnimation({}) //创建一个动画实例
					//淡入
					animation.opacity(1).step({
						duration: this.duration
					}) //描述动画
					this.showpic = animation.export();
					//淡出
					animation.opacity(0).step({
						duration: this.duration
					})
					this.hidepic = animation.export();
					if (this.autoplay) {
						this.setTime = setInterval(() => {
							this.num = this.num + 1;
							if (this.num >= this.list.length) {
								this.num = 0;
							}
							setTimeout(() => {
								this.zIndex = this.num;
							}, this.interval + 1000)
						}, this.interval);
					}
				},
				immediate: true
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		width: 750rpx;
		position: relative;
	}

	.pic {
		width: 750rpx;
		position: absolute;
		top: 0;
		left: 0;
	}

	.u-swiper-indicator {
		padding: 0 24rpx;
		position: absolute;
		display: flex;
		width: 100%;
		z-index: 1;
	}

	.u-indicator-item-round-active {
		width: 34rpx !important;
		background-color: rgba(255, 255, 255, 0.8) !important;
	}

	.u-indicator-item-round {
		width: 14rpx;
		height: 14rpx;
		margin: 0 6rpx;
		border-radius: 20rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-rect {
		width: 26rpx;
		height: 8rpx;
		margin: 0 6rpx;
		transition: all 0.5s;
		background-color: rgba(0, 0, 0, 0.3);
	}

	.u-indicator-item-rect-active {
		background-color: rgba(255, 255, 255, 0.8);
	}
</style>
